<template>
  <div id="resume" class="" style="">
<!--    <div style="height: 56px;background-color: rebeccapurple">头部</div>-->
   <home-header></home-header>
    <div class="resume_area">

      <div class="resume_box">
        <!-- 左边导航-->
         <div class="resume_left" style="">
          <ul class="navs" :class="isactive">
            <li style="cursor: auto;display: block">
              <div>
                <div class="navs_title">在线简历</div>
              </div>
            </li>

            <div class="tip">必填</div>
            <li v-if="item.id <=3" :class="{activeOne: activeOne=== idx}"
                @click="scrollTo(idx)"  v-for="(item,idx) in Arr" :key="idx">
              <div class="module-row">
                <div class="module-item" >
                  <div class="module-name">
                    <i class="el-icon-user" style=""></i>
                    <span>{{item.title}}</span>
                    <span class="require"></span>
                  </div>
                  <div class="integrity"><span>去完善</span><span class="integrity_line"></span></div>
<!--                  <div class="active-mark"></div>-->
                  <div :class="{activeMark: activeOne=== idx}"></div>
                </div>
              </div>
            </li>

            <div class="tip" style="border-top: #cccccc 1px double;">以下3项至少填写1项</div>
            <li v-if="item.id >3 && item.id <=6" :class="{activeOne: activeOne=== idx}"
                @click="scrollTo(idx)" v-for="(item,idx) in Arr" :key="idx">
              <div class="module-row">
                <div class="module-item" >
                  <div class="module-name">
                    <i class="el-icon-user" style=""></i>
                    <span>{{item.title}}</span>
                    <span class="require"></span>
                  </div>
                  <div class="integrity"><span>去完善</span><span class="integrity_line"></span></div>
                  <div :class="{activeMark: activeOne=== idx}"></div>
                </div>
              </div>
            </li>
            <div class="tip" style="border-top: #cccccc 1px double;"></div>
            <li v-if="item.id >6 && item.id <=11" :class="{activeOne: activeOne=== idx}"
                @click="scrollTo(idx)" v-for="(item,idx) in Arr" :key="idx">
              <div class="module-row">
                <div class="module-item" >
                  <div class="module-name">
                    <i class="el-icon-user" style=""></i>
                    <span>{{item.title}}</span>
                  </div>
                  <div :class="{activeMark: activeOne=== idx}"></div>
                </div>
              </div>
            </li>
<!--            <li>-->
<!--              <div style="margin-bottom: 100px; clear: both;"> </div>-->
<!--            </li>-->
<!--            <div style="height: 100px;width: 255px">sss</div>-->
            <div class="left-wrap attach-pannel">
              <div class="title"> 附件简历 </div>
              <div class="attr attr-resume-wrap">
                <div class="upload-pannel">
                  <i class="el-icon-user"></i>
                  <use xlink:href="#icon-icon_upload" data-v-7f692b30=""></use></svg>
                  <span class="text">上传附件简历</span>
                </div>
              </div>
            </div>
          </ul>
<!--           <div style="height: 600px;width: 255px; background: red">oo</div>-->
         </div>
        <!-- 右边内容-->
         <div class="resume_content content content-wrap" style="display: block">
          <div style="">
            简历-0
          </div>
          <div style="">简历-1</div>
          <div style="">简历-2</div>
          <div style="">简历-3</div>
          <div style="">简历-4</div>
          <div style="">简历-5</div>
          <div style="">简历-6</div>
          <div style="">简历-7</div>
          <div style="">简历-8</div>
          <div style="">简历-9</div>
          <div style="height: 800px">简历-11</div>

<!--          <div id="anchor-description" class="module-block description cutting-line">-->
<!--            <div class="module-title">-->
<!--              <div class="m-l">-->
<!--                  <div class="line"></div>-->
<!--                  <p class="title">个人总结</p>-->
<!--              </div>-->
<!--              <div class="m-r">-->
<!--                <span class="btn-text">添加</span>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="resume-module&#45;&#45;description" data-v-1f532bb1="">-->
<!--                <div class="exist-data-wrap" data-v-1f532bb1=""></div>-->
<!--              </div>-->
<!--          </div>-->

         </div>
      </div>

<!--    <div style="width: 100px;height: 200px;background: #1c3d79">aaaaaa</div>-->
    </div>
  </div>
</template>

<script>
/* eslint-disable */
// 我的简历
import HomeHeader from '@/views/components/common/home-header'
export default {
  name: 'resume',
  components: { HomeHeader },
  data(){
    return {
      tabPosition: 'left',
      activeOne: 0, // 当前激活的导航索引,
      isactive: '',
      activeMark:'activeMark',
      titleArr:[1,2,3,4,5,6,7,8,9,10,11],
      Arr:[
        {id:1,title:'基础信息'},
        {id:2,title:'教育经历'},
        {id:3,title:'求职偏好'},

        {id:4,title:'社团和组织经历'},
        {id:5,title:'实习经历'},
        {id:6,title:'学术经历'},

        {id:7,title:'获奖经历'},
        {id:8,title:'技能/语言'},
        {id:9,title:'作品展示'},
        {id:10,title:'兴趣/特长'},
        {id:11,title:'个人总结'}
      ]
    }
  },
  mounted() {
    // 监听滚动事件
    // window.addEventListener('scroll', this.onScroll, false)
    let winscroll = window.addEventListener('scroll', this.onScroll)
    // console.log('windowwinscroll: ',winscroll)
  },
  destroy() {
    // 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
    window.removeEventListener('scroll', this.onScroll)
  },
  created () {
    // this.scrollTo()
  },
  methods: {
    // 滚动监听器
    onScroll() {
      // 获取所有锚点元素
      const navContents = document.querySelectorAll('.content div')
      // 所有锚点元素的 offsetTop
      const offsetTopArr = []
      navContents.forEach(item => {
        offsetTopArr.push(item.offsetTop)
      })
      // 获取当前文档流的 scrollTop
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // console.log('文档流的 scrollTop: ',scrollTop)
      if (scrollTop >= 76){
        this.isactive ='navs_top56'
      }else {
        this.isactive =''
      }
      // 定义当前点亮的导航下标
      let navIndex = 0
      for (let n = 0; n < offsetTopArr.length; n++) {
        // 如果 scrollTop 大于等于第n个元素的 offsetTop 则说明 n-1 的内容已经完全不可见
        // 那么此时导航索引就应该是n了
        if (scrollTop >= offsetTopArr[n]) {
          navIndex = n
        }
      }
      this.activeOne = navIndex
      // this.activeMark ='activemark'
    },
    // 跳转到指定索引的元素
    scrollTo(index) {
      // console.log('跳转到指定: ',index)
      // 获取目标的 offsetTop
      // css选择器是从 1 开始计数，我们是从 0 开始，所以要 +1
      let targetOffsetTop = document.querySelector(`.content div:nth-child(${index + 1})`).offsetTop
      // 获取当前 offsetTop
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop

      // 定义一次跳 50 个像素
      const STEP = 50
      // 判断是往下滑还是往上滑
      if (scrollTop > targetOffsetTop) {
        // 往上滑
        smoothUp()
      } else {
        // 往下滑
        smoothDown()
      }
      // 定义往下滑函数
      function smoothDown() {
        // 如果当前 scrollTop 小于 targetOffsetTop 说明视口还没滑到指定位置
        if (scrollTop < targetOffsetTop) {
          // 如果和目标相差距离大于等于 STEP 就跳 STEP
          // 否则直接跳到目标点，目标是为了防止跳过了。
          if (targetOffsetTop - scrollTop >= STEP) {
            scrollTop += STEP
          } else {
            scrollTop = targetOffsetTop
          }
          document.body.scrollTop = scrollTop
          document.documentElement.scrollTop = scrollTop
          requestAnimationFrame(smoothDown)
        }
      }
      // 定义往上滑函数
      function smoothUp() {
        if (scrollTop > targetOffsetTop) {
          if (scrollTop - targetOffsetTop >= STEP) {
            scrollTop -= STEP
          } else {
            scrollTop = targetOffsetTop
          }
          document.body.scrollTop = scrollTop
          document.documentElement.scrollTop = scrollTop
          requestAnimationFrame(smoothUp)
        }
      }
    }
  }


}
</script>

<style scoped>
#resume{
  min-height: 800px;
  background-color: #f6f6f8;
}
.resume_area{
  min-height: 800px;
  clear: right;
}
.resume_box{
  display: flex;
  justify-content: space-between;
  width: 1080px;
  margin: 0 auto;
  margin-top: 20px;
  /*position: fixed;*/
  /*top: 65px;*/
  /* overflow-y:scroll;*/
  /*overflow-x:hidden;*/
  /*height:100%*/
}
.resume_area ul{
  list-style: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  /*position: fixed;*/
  /*top: 50px;*/
}

.resume_left{
  /*position: fixed;*/
  width: 255px;
  /*height: 530px;*/
  background-color: #f6f6f8;
  /*background-color: red;*/
  /*overflow: scroll;*/
}

/* 导航栏的样式 */
.navs {
  position: fixed;
  top: 76px;
  /*left: 700px;*/
  height: 100%;
  width: 255px;
  /*background-color: #f6f6f8;*/
  background-color: red;
  height: calc(100% - 10%) ;
  -webkit-user-select:none;
  /*left: calc((100vw - 1080px) / 2 - 42px);*/
  /*border: #c0c0c1 1px solid;*/
}

.navs_top56{
  position: fixed;
  height: 100%;
  transition-duration: 0.8s;
  top: 0;
  overflow: scroll;
  overflow-x: hidden;
  /*overflow-y: auto;*/
}
.navs_top56::-webkit-scrollbar {
  display: none;
}
.navs .navs_title{
  color: #333;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  justify-content: space-between;
  padding-top: 20px;
}
.navs .tip{
  color: #999;
  font-size: 12px;
  line-height: 20px;
  padding: 10px 20px;
  background: #FFF;
  /*background-color: #f6f6f8;*/
}

.navs li {
  padding-left: 20px;
  line-height: 1.6;
  font-size: 14px;
  background: #fff;
}
.navs li:hover{
  color: #6AA2E4;
  background: #e9f3ff
}
.navs .module-row .module-item :hover{
  color: #6AA2E4;
}

/* 当导航被点亮后改变颜色 */
.navs .activeOne{
  color: #6AA2E4;
  position: relative;
  background: #e9f3ff;
  /*background-color: #e2e2e2;*/
}
/*.navs .activeOne::after{*/
/*  width: 4px;*/
/*  height: 26px;*/
/*  background: #6aa2e4;*/
/*}*/
.navs .module-item{
  display: flex;
  height: 40px;
  line-height: 40px;
  align-items: baseline;
  /*justify-content: space-between;*/
  position: relative;
}

.navs .module-item .module-name>span {
  /*display: inline-block;*/
  font-size: 14px;
  color: #333;
  /*white-space: nowrap;*/
  margin: 0 0 0 5px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.navs .module-item .module-name .require {
  /*margin-left: 4px;*/
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #eb3951;
}
.navs .module-row .module-item .integrity {
  display: flex;
  /*align-items: center;*/
  color: #6AA2E4;
  font-size: 14px;
  /*margin-right: 16px;*/
  padding-right: 10px;
  position: absolute;
  right: 0;
}
.activeMark{
  /*margin-top: 5px;*/
  width: 4px;
  height: 26px;
  background: #6aa2e4;
  position: absolute;
  top: 7px;
  right: 0;
}
.attach-pannel {
  margin-top: 20px;
  padding-bottom: 15px;
  background: #F8F8FA;
  border: #c0c0c1 1px solid;
}
.attach-pannel .title {
  padding: 14px 16px 10px 20px;
  color: #333;
  font-size: 16px;
  text-align: left;
  display: flex;
  justify-content: space-between;
}
.attach-pannel .attr-resume-wrap .upload-pannel {
  margin: 0 20px;
  margin-bottom: 5px;
  width: auto;
  height: 48px;
  color: #6AA2E4;
  border: 1px solid #6AA2E4;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.attach-pannel .attr-resume-wrap .upload-pannel .form-icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  color: #6AA2E4;
}
/* 内容区的样式 左边导航*/

/* 内容区的样式 右边内容*/
.resume_content{
  /*flex: 1;*/
}
.resume_content .content-wrap .cutting-line {
  position: relative;
  padding-top: 37px;
  padding-bottom: 12px;
}
.resume_content {
  background-color: white;
  /*width: 100%;*/
  width: 805px;
}
.resume_content div {
  width: 100%;
  min-height: 100px;
  font-size: 36px;
  padding: 20px;
  background-color: #7ec384;
}
.resume_content div:nth-child(2n) {
  background-color: #847ec3;
}
</style>
